import React, { useEffect, useRef, useState } from "react";

function Study1(){
    // 声明一个新的叫做“count”的 state 变量
    const [count,setCount] = useState(0)

    // 相当于 componentDidMount 和 componentDidUpdate:
    // 组件更新dom后设置一个页面标题
    useEffect(()=>{
        // 使用浏览器的API 更新页面标题
        document.title = `You clicked ${count} times`
    })
    return (
        <>
        <h3>Hook是React16.8的新增特性，它可以在不编写class的情况下
            使用state以及其它React特性</h3>

        <div>
            <p>Click {count} times</p>
            <button onClick={()=> setCount(count+1)}>
                Click me
            </button>
        </div>

        <h3>
           当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后
           运行你的“副作用”函数。由于副作用函数是在组件内声明的，所以它们可以
           访问到组件的 props 和 state。默认情况下，React 会在每次渲染后调用
           副作用函数 —— 包括第一次渲染的时候。 
        </h3>

        </>
    )
}

function Study2(){
    const inputEl = useRef<null | HTMLInputElement>(null)
    const onButtonClick = ()=>{
        // `current`指向已挂载到DOM上的文本输入元素
        if (inputEl.current){
            inputEl.current.focus()
        }
    }

    return(
        <>
        <input type="text" ref={inputEl} />
        <button onClick={onButtonClick}>Focus the input</button>
        </>
    )
}

export default Study2